import React, { Component } from 'react';

class Createref extends Component {

    // 1 创建  ref  容器对象
    username=React.createRef();
    div=React.createRef();

    //获取数据
    getData = ()=>{
        console.log(this.username.current.value);
       let value=this.username.current.value;
       this.div.current.innerHTML=value;
    }

    render() {
        return (
            <>
                <h1>回调函数形式的[ref]:获取真实dom对象</h1>
                {/* 当执行此行代码时:将 当前的 input对象 作为参数传递给回调函数,将dom对象赋值给当前实力对象的一个属性 */}
                <input ref={this.username} type='text'/>
                <button onClick={this.getData}>获取数据</button>

                <div ref={this.div} style={{width:'300px',height:'300px',border:'1px solid grey',wordBreak:"break-all"}}></div>
            </>
        );
    }
}

export default Createref;